<template>
  <div class="container">
      <div class="card" style="min-height: 85vh;">
        <div class="blog-list">
      <div class="search">
      <el-input placeholder="请输入公告标题查询" style="width: 200px" v-model="title"></el-input>
      <el-button type="info" plain style="margin-left: 10px" @click="handleSearch">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="handleReset">重置</el-button>
    </div>
        <!-- 公告列表 -->
        <div class="blog-box" v-for="item in tableData" :key="item.id" v-if="total > 0">
          <!-- 文本（标题、描述、其它信息） -->
          <div class="blog-content">
            <a :href="'/user/news/detail?id=' + item.id" target="_blank">
              <div class="blog-title">{{ item.title }}</div>
            </a>
            <div class="blog-description" style="color: #666; margin-bottom: 10px; font-size: 13px">{{ item.content.slice(0, 50) + (item.content.length > 50 ? '...' : '') }}</div>
            <div class="blog-meta" style="display: flex; align-items: center;">
              <span style="color: #666; margin-right: 20px"><i class="el-icon-date"></i> {{ item.createdAt }}</span>
            </div>
          </div>
          <!-- 图片 -->
          <div class="blog-image">
            <img style="width: 100%; height: 80px; border-radius: 5px;" :src="item.img" alt="公告图片">
          </div>
        </div>
        <div v-if="total === 0" class="no-data">暂无数据</div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
          background
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
import { AnnouncementListService, selectByTitleService } from '@/api/announcement.js';

const tableData = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const title = ref('')

const fetchData = async () => {
  try {
    const params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      title: title.value
    }
    const response = await AnnouncementListService(params)
    tableData.value = response.data.list
    total.value = response.data.total
  } catch (error) {
    ElMessage.error('获取公告列表失败')
  }
}

const handleSearch = async () => {
  try {
    const response = await selectByTitleService(title.value)
    if (response.data) {
      // 确保 response.data 是一个数组
      const data = Array.isArray(response.data) ? response.data : [response.data]
      tableData.value = data
      total.value = data.length
    } else {
      ElMessage.warning('未找到公告')
      tableData.value = []
      total.value = 0
    }
  } catch (error) {
    ElMessage.error('查询公告失败')
  }
}

const handleReset = () => {
  title.value = ''
  pageNum.value = 1
  fetchData()
}

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  fetchData()
}

const handleCurrentChange = (newPage) => {
  pageNum.value = newPage
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>
<style scoped>
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.blog-list {
  margin-bottom: 20px;
}

.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.blog-box {
  display: flex;
  grid-gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  transition: all 0.3s ease;
}

.blog-box:hover {
  background-color: #f0f0f0;
}

.blog-box:last-child {
  border-bottom: none;
}

.blog-content {
  flex: 1;
  width: 0;
}

.blog-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
  color: #333;
}

.blog-title:hover {
  color: #2a60c9;
}

.blog-description {
  color: #666;
  margin-bottom: 10px;
  font-size: 13px;
}

.blog-meta {
  font-size: 13px;
  color: #666;
}

.blog-image {
  width: 150px;
}

.no-data {
  padding: 20px 0;
  text-align: center;
  font-size: 16px;
  color: #666;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.el-button {
  margin: 0 5px;
}
</style>